<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./reset.css" />
    <title>VTOP3</title>
  </head>
  <body>
    <div class="dot__left-wrapper">
      <div class="dot__left"></div>
    </div>
    <div class="dot__right"></div>
    <!-- header.html -->

    <div id="header__desctop">
      <div class="container">
        <header>
          <nav>
            <div class="image__block">
              <img src="./assets/images/Logo.png" alt="Logo" />
            </div>
            <ul>
              <li>
                <a href="#"><h5>About us</h5></a>
              </li>
              <li>
                <a href="#"><h5>Grand</h5></a>
              </li>
              <li>
                <a href="#"><h5>Commissions</h5></a>
              </li>
              <li>
                <a href="#"><h5>Blub</h5></a>
              </li>
              <li>
                <a href="#"><h5>Contact us</h5></a>
              </li>
              <li>
                <a href="#"><h5>Careers</h5></a>
              </li>
            </ul>
            <div id="headerActions">
              <button id="languageSwitcher">
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14.1692 3.71888C12.7989 1.84023 11.0012 0.775068 8.6355 0.5C9.74223 1.7817 10.5035 3.16875 10.9895 4.71966C12.0962 4.49141 13.1444 4.19294 14.1692 3.71888Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M4.25006 5.52288C3.83001 5.41303 3.42197 5.30631 3.01989 5.18202C2.66058 5.06606 2.30606 4.93336 1.95173 4.80073C1.7517 4.72586 1.55173 4.65102 1.35101 4.57922C0.162292 6.66856 0.273551 9.63579 1.34515 11.3857C1.94399 11.1975 2.53794 11.0093 3.13731 10.8194L3.1384 10.8191C3.67559 10.6489 4.21745 10.4772 4.77076 10.303C4.45455 8.78132 4.4604 7.21285 4.77661 5.66193C4.59874 5.61407 4.42337 5.5682 4.25006 5.52288Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M12.9458 5.15847C12.3749 5.33989 11.8035 5.52147 11.2297 5.70289C11.5459 7.23625 11.5342 8.79301 11.2297 10.2971C12.3891 10.6658 13.5193 11.0228 14.6612 11.3798C15.7855 9.45435 15.7737 6.52809 14.6612 4.61432C14.0874 4.7957 13.5166 4.97709 12.9458 5.15847Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M5.7194 10.2269C5.39148 8.74034 5.40319 7.28307 5.70183 5.82579C5.94061 5.83983 6.17518 5.8565 6.40679 5.87296C6.9476 5.91139 7.47255 5.94869 7.99728 5.94869C8.52199 5.94869 9.0467 5.91141 9.58748 5.87298C9.81907 5.85652 10.054 5.83983 10.2927 5.82579C10.6148 7.25966 10.6031 8.72864 10.2869 10.221C8.75267 10.022 7.2536 10.0103 5.7194 10.2269Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M14.1693 12.2753C12.8107 14.1539 11.0072 15.2132 8.64145 15.5C9.73062 14.2242 10.5094 12.843 10.9837 11.2862C12.0846 11.4969 13.1269 11.8129 14.1693 12.2753Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M7.35894 0.5C4.99322 0.780921 3.18965 1.84608 1.78428 3.78326C2.88515 4.12271 3.92162 4.44459 4.99322 4.77819C5.49096 3.15704 6.26391 1.7817 7.35894 0.5Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M7.35894 15.5C4.99907 15.2191 3.20136 14.1598 1.78428 12.2167C2.13525 12.1085 2.47968 12.0021 2.82079 11.8967L2.82228 11.8962C3.55057 11.6711 4.26377 11.4508 4.99322 11.2277C5.49096 12.8312 6.2522 14.2183 7.35894 15.5Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M10.0408 4.86013C9.60158 3.48479 8.92817 2.28503 7.99711 1.19646C7.06019 2.30258 6.38093 3.4965 5.95931 4.86013C7.33541 5.04156 8.67052 5.04741 10.0408 4.86013Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M8.00297 14.8035C7.07191 13.7208 6.39849 12.521 5.95931 11.1457C7.3237 10.9526 8.65881 10.9584 10.0466 11.1399C9.60744 12.5093 8.93403 13.7033 8.00297 14.8035Z"
                    fill="#EBF29D"
                  />
                </svg>
                <h5 id="currentLanguage">RU</h5>
              </button>
              <button id="loginButton"><h5>LOG IN</h5></button>
              <button id="signupButton"><h5>SIGN UP</h5></button>
            </div>
          </nav>
        </header>
      </div>
    </div>

    <div id="header__mobile">
      <div class="container">
        <header>
          <div class="header__title">
            <div class="image__block">
              <img src="./assets/images/Logo__short.png" alt="Logo" />
            </div>

            <div id="mobile__btns">
              <button>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M14.1692 3.71888C12.7989 1.84023 11.0012 0.775068 8.6355 0.5C9.74223 1.7817 10.5035 3.16875 10.9895 4.71966C12.0962 4.49141 13.1444 4.19294 14.1692 3.71888Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M4.25006 5.52288C3.83001 5.41303 3.42197 5.30631 3.01989 5.18202C2.66058 5.06606 2.30606 4.93336 1.95173 4.80073C1.7517 4.72586 1.55173 4.65102 1.35101 4.57922C0.162292 6.66856 0.273551 9.63579 1.34515 11.3857C1.94399 11.1975 2.53794 11.0093 3.13731 10.8194L3.1384 10.8191C3.67559 10.6489 4.21745 10.4772 4.77076 10.303C4.45455 8.78132 4.4604 7.21285 4.77661 5.66193C4.59874 5.61407 4.42337 5.5682 4.25006 5.52288Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M12.9458 5.15847C12.3749 5.33989 11.8035 5.52147 11.2297 5.70289C11.5459 7.23625 11.5342 8.79301 11.2297 10.2971C12.3891 10.6658 13.5193 11.0228 14.6612 11.3798C15.7855 9.45435 15.7737 6.52809 14.6612 4.61432C14.0874 4.7957 13.5166 4.97709 12.9458 5.15847Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M5.7194 10.2269C5.39148 8.74034 5.40319 7.28307 5.70183 5.82579C5.94061 5.83983 6.17518 5.8565 6.40679 5.87296C6.9476 5.91139 7.47255 5.94869 7.99728 5.94869C8.52199 5.94869 9.0467 5.91141 9.58748 5.87298C9.81907 5.85652 10.054 5.83983 10.2927 5.82579C10.6148 7.25966 10.6031 8.72864 10.2869 10.221C8.75267 10.022 7.2536 10.0103 5.7194 10.2269Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M14.1693 12.2753C12.8107 14.1539 11.0072 15.2132 8.64145 15.5C9.73062 14.2242 10.5094 12.843 10.9837 11.2862C12.0846 11.4969 13.1269 11.8129 14.1693 12.2753Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M7.35894 0.5C4.99322 0.780921 3.18965 1.84608 1.78428 3.78326C2.88515 4.12271 3.92162 4.44459 4.99322 4.77819C5.49096 3.15704 6.26391 1.7817 7.35894 0.5Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M7.35894 15.5C4.99907 15.2191 3.20136 14.1598 1.78428 12.2167C2.13525 12.1085 2.47968 12.0021 2.82079 11.8967L2.82228 11.8962C3.55057 11.6711 4.26377 11.4508 4.99322 11.2277C5.49096 12.8312 6.2522 14.2183 7.35894 15.5Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M10.0408 4.86013C9.60158 3.48479 8.92817 2.28503 7.99711 1.19646C7.06019 2.30258 6.38093 3.4965 5.95931 4.86013C7.33541 5.04156 8.67052 5.04741 10.0408 4.86013Z"
                    fill="#EBF29D"
                  />
                  <path
                    d="M8.00297 14.8035C7.07191 13.7208 6.39849 12.521 5.95931 11.1457C7.3237 10.9526 8.65881 10.9584 10.0466 11.1399C9.60744 12.5093 8.93403 13.7033 8.00297 14.8035Z"
                    fill="#EBF29D"
                  />
                </svg>
              </button>
              <div class="burger-menu" id="burger-menu">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
          <ul class="nav-menu hidden" id="nav-menu">
            <li>
              <a href="#"><h5>About us</h5></a>
            </li>
            <li>
              <a href="#"><h5>Grand</h5></a>
            </li>
            <li>
              <a href="#"><h5>Commissions</h5></a>
            </li>
            <li>
              <a href="#"><h5>Blub</h5></a>
            </li>
            <li>
              <a href="#"><h5>Contact us</h5></a>
            </li>
            <li>
              <a href="#"><h5>Careers</h5></a>
            </li>
            <div id="headerActions">
              <button><h5>LOG IN</h5></button>
              <button><h5>SIGN UP</h5></button>
            </div>
          </ul>
        </header>
      </div>
    </div>

    <!-- main.html -->

    <div class="container">
      <main>
        <div class="text__block">
          <h1>Lorem IPSU <span>OPEN</span></h1>
          <h2>Maybe You Maybe Me.</h2>
          <button><h3>Partner</h3></button>
        </div>

        <div id="blog">
          <h2>BLUB</h2>
          <div id="main__swipper">
            <!-- Slider main container -->
          </div>

          <div id="blog__area">
            <div id="blog__area__scroll"></div>
          </div>
        </div>
      </main>
    </div>

    <!-- footer.html -->

    <footer>
      <div class="container">
        <nav>
          <h5>Terms & Conditions</h5>
          <h5>Cookies</h5>
          <h5>Contacts</h5>
        </nav>

        <div id="social">
          <h5>Our social media:</h5>
          <div id="social__btns"></div>
        </div>
      </div>
    </footer>

    <script src="header.js"></script>
    <script src="main.js"></script>
    <script src="swiper.js"></script>
    <script src="footer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 0,
        centeredSlides: true,
        speed: 1500,
        direction: "vertical",
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: false,
        },
        loop: true,
        slidesPerView: "auto",
        allowTouchMove: false,
      });

      var swiper2 = new Swiper(".mySwiper1", {
        spaceBetween: 0,
        centeredSlides: true,
        speed: 1500,
        direction: "vertical",
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: true,
        },
        loop: true,
        slidesPerView: "auto",
        allowTouchMove: false,
      });

      var swiper3 = new Swiper(".mySwiper2", {
        spaceBetween: 0,
        centeredSlides: true,
        speed: 1500,
        direction: "vertical",
        autoplay: {
          delay: 0,
          disableOnInteraction: false,
          reverseDirection: false,
        },
        loop: true,
        slidesPerView: "auto",
        allowTouchMove: false,
      });
    </script>
  </body>
</html>
